<template>
  <div class="avatar-group">
    <div
      v-for="(item, k) in dataList"
      :key="k"
      class="avatar-item"
      :style="{
        zIndex: dataList.length - k,
      }"
      @click="handleClick(item, k)"
    >
      <el-avatar
        :size="size"
        :shape="shape"
        :src="publicSrc(typeof item === 'object' ? item[name] : item)"
      />
    </div>
    <div
      v-if="more"
      class="avatar-item"
      style="z-index: 0"
      @click="handleClick('more', -1)"
    >
      <el-avatar :size="size" :shape="shape" :src="avatarMore" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import avatarMore from "@/assets/avatar_more.png";
const props = defineProps({
  // 头像列表
  data: {
    type: Array,
    default: () => [],
  },
  // 读取字段
  name: {
    type: String,
    default: "",
  },
  // 头像数量
  length: {
    type: [Number, String],
    default: 4,
  },
  // 头像大小
  size: {
    type: [Number, String],
    default: 48,
  },
  // 头像形状
  shape: {
    type: String,
    default: "circle",
  },
  // 是否显示更多
  more: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["click"]);

const dataList = <any>computed(() => {
  let data = props.data;
  let len = typeof props.length === "string" ? parseInt(props.length) : props.length;
  if (data.length > len) {
    data = data.slice(0, len);
  }
  return data;
});

// 点击头像
const handleClick = (item: any, index: number) => {
  emit("click", {
    data: item,
    index,
  });
};
</script>
<style lang="scss" scoped>
.avatar-group {
  display: flex;
  align-items: center;
  .avatar-item {
    margin-right: -18px;
    cursor: pointer;
  }
}
</style>
